<template>
  <div class="winningResult">
    <!-- 标题 -->
    <div
      class="title"
      :class="{
        'title-fri': lotteryStore.isFri,
      }"
    >
      <div class="title-content items-center">
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-left"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-left"
          src="/image/lottery-v3/titlefri-icon.svg"
        />

        <div
          class="title-content-text"
          :class="{
            'title-content-text-fri': lotteryStore.isFri,
          }"
        >
          {{ $t("lotteryMoney.bqzjjg") }}
        </div>
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-right"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-right"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
      </div>
    </div>
    <!-- 中奖记录 -->
    <div class="result">
      <div class="result-top">
        <!-- 蝴蝶结 -->
        <img
          class="result-top-hdj"
          src="/image/lottery-v3/winning-result-hdj.png"
        />
        <!-- 一等奖 -->
        <div
          class="result-top-prize items-center"
          :class="{
            'result-top-prize-fri': lotteryStore.isFri,
          }"
        >
          <div class="result-top-prize-left items-center">
            <img
              class="result-top-prize-left-img"
              src="/image/lottery-v3/result-ydj-icon.svg"
            />
            <div class="result-top-prize-left-text">
              {{ $t("lotteryMoney.ydj") }}
            </div>
          </div>
          <!-- 有人中奖 -->
          <div
            v-if="
              lotteryStore.activityCurStatus == 5 &&
              source.firstPrizeLevel &&
              source.firstPrizeLevel.userPrizeDetailList &&
              source.firstPrizeLevel.userPrizeDetailList.length > 0
            "
            class="result-top-prize-right items-center"
          >
            <div class="result-top-prize-right-bdc">
              ${{
                decimalToLength(source.firstPrizeLevel.oneBetPrizeAmount)
              }}/{{ $t("lotteryMoney.xxz") }}
            </div>
            <div class="result-top-prize-right-bet">
              {{ source.firstPrizeLevel.totalPrizeCount }}
              {{ $t("lotteryMoney.xxz") }}
            </div>
          </div>
          <!-- 未中奖 -->
          <div
            v-else-if="
              lotteryStore.activityCurStatus == 5 && source.firstPrizeLevel
            "
            class="result-top-prize-right items-center"
          >
            <div class="result-top-prize-right-bdc">
              ${{ decimalToLength(source.firstPrizeLevel.oneBetPrizeAmount) }}
            </div>
            <div class="result-top-prize-right-bet">
              0 {{ $t("lotteryMoney.xxz") }}
            </div>
          </div>
          <!-- 待开奖 -->
          <div
            v-else-if="lotteryStore.activityCurStatus == 3"
            class="result-top-prize-dkj"
          >
            {{ $t("lotteryMoney.resultDkj") }}
          </div>
        </div>
        <!-- 一等奖: 获奖者 -->
        <div class="result-top-winner">
          <img
            v-if="!lotteryStore.isFri"
            class="result-top-winner-left"
            src="/image/lottery-v3/result-top-icon.svg"
          />
          <img
            v-else
            class="result-top-winner-left"
            src="/image/lottery-v3/result-topfri-icon.svg"
          />
          <div
            class="result-top-winner-center"
            :class="{ 'result-top-winner-center-fri': lotteryStore.isFri }"
          >
            <!-- 结果 -->
            <template v-if="lotteryStore.activityCurStatus == 5">
              <!-- 无人,获得一等奖 -->
              <div
                v-if="
                  !source.firstPrizeLevel.userPrizeDetailList ||
                  source.firstPrizeLevel.userPrizeDetailList.length == 0
                "
                class="result-top-winner-center-wrzj items-center"
              >
                <img
                  v-if="!lotteryStore.isFri"
                  class="result-top-winner-center-wrzj-img"
                  src="/image/lotterymoney/zwsj-icon.svg"
                />
                <img
                  v-else
                  class="result-top-winner-center-wrzj-img"
                  src="/image/lottery-v3/zwsj1-icon.svg"
                />
                <div class="result-top-winner-center-wrzj-title">
                  {{ $t("lotteryMoney.wrzj") }}
                </div>
                <div class="result-top-winner-center-wrzj-desc">
                  {{ $t("lotteryMoney.jjgdxyq") }}
                </div>
              </div>
              <!-- 一等奖获奖者 -->
              <template v-else>
                <div
                  class="result-top-winner-center-prize items-center"
                  v-for="item in source.firstPrizeLevel.userPrizeDetailList"
                  :key="item.sid"
                >
                  <div class="result-top-winner-center-left items-center">
                    <ImgNuxt
                      class="result-top-winner-center-left-img"
                      isHttp
                      :placeholder="file.avatarDefault"
                      :src="item.avatar || file.avatarDefault"
                    />
                    <div class="result-top-winner-center-left-text">
                      {{ userNameToFormat(item.nickname) }}
                    </div>
                  </div>
                  <div class="result-top-winner-center-right items-center">
                    <div
                      class="result-top-winner-center-right-bdc"
                      :class="{
                        'result-top-winner-center-right-bdc-fri':
                          lotteryStore.isFri,
                      }"
                    >
                      ${{ decimalToLength(item.totalPrizeAmount) }}
                    </div>
                    <div class="result-top-winner-center-right-bet">
                      {{ item.totalPrizeCount }} {{ $t("lotteryMoney.xxz") }}
                    </div>
                  </div>
                </div>
              </template>
            </template>
            <!-- 倒计时 -->
            <div
              v-else-if="lotteryStore.activityCurStatus == 3"
              class="result-top-countdown items-center"
            >
              <img
                class="result-top-countdown-icon"
                src="/image/lottery-v3/result-djs-icon.svg"
              />
              <div class="result-top-countdown-center">
                <div class="result-top-countdown-center-top">
                  <div class="result-top-countdown-center-top items-center">
                    <div
                      class="result-top-countdown-center-top-text result-top-countdown-center-top-width"
                      :class="{
                        'result-top-countdown-center-top-text-sun':
                          lotteryStore.isFri,
                      }"
                    >
                      {{ hours }}
                    </div>
                    <div class="result-top-countdown-center-top-point">:</div>
                    <div
                      class="result-top-countdown-center-top-text result-top-countdown-center-top-width"
                      :class="{
                        'result-top-countdown-center-top-text-sun':
                          lotteryStore.isFri,
                      }"
                    >
                      {{ minutes }}
                    </div>
                    <div class="result-top-countdown-center-top-point">:</div>
                    <div
                      class="result-top-countdown-center-top-text result-top-countdown-center-top-width"
                      :class="{
                        'result-top-countdown-center-top-text-sun':
                          lotteryStore.isFri,
                      }"
                    >
                      {{ seconds }}
                    </div>
                  </div>
                </div>
                <div class="result-top-countdown-center-bottom">
                  {{ $t("lotteryMoney.kjdjs") }}
                </div>
              </div>
              <div class="result-top-countdown-bottom items-center">
                <img
                  v-if="lotteryStore.isFri"
                  class="result-top-countdown-bottom-icon"
                  src="/image/title-yellow-icon.svg"
                />
                <img
                  v-else
                  class="result-top-countdown-bottom-icon"
                  src="/image/pledge/title-icon.svg"
                />
                <div class="result-top-countdown-bottom-text">
                  {{ $t("lotteryMoney.djsjsgb") }}
                </div>
                <img
                  v-if="lotteryStore.isFri"
                  class="result-top-countdown-bottom-icon"
                  src="/image/title-yellow-icon.svg"
                />
                <img
                  v-else
                  class="result-top-countdown-bottom-icon"
                  src="/image/pledge/title-icon.svg"
                />
              </div>
            </div>
          </div>
          <img
            v-if="!lotteryStore.isFri"
            class="result-top-winner-right"
            src="/image/lottery-v3/result-top-icon.svg"
          />
          <img
            v-else
            class="result-top-winner-right"
            src="/image/lottery-v3/result-topfri-icon.svg"
          />
        </div>
      </div>
      <!-- 二等奖 -->
      <div
        class="result-prize items-center"
        :class="{ 'result-prize-fri': lotteryStore.isFri }"
      >
        <div class="result-prize-left items-center">
          <img
            class="result-prize-left-img"
            src="/image/lottery-v3/result-edj-icon.svg"
          />
          <div class="result-prize-left-text">
            {{ $t("lotteryMoney.edj") }}
          </div>
        </div>
        <div
          v-if="lotteryStore.activityCurStatus == 5"
          class="result-prize-right items-center"
        >
          <div
            class="result-prize-right-bdc"
            :class="{ 'result-prize-right-bdc-fri': lotteryStore.isFri }"
          >
            ${{ decimalToLength(source.secondPrizeLevel.oneBetPrizeAmount) }}/{{
              $t("lotteryMoney.xxz")
            }}
          </div>
          <div class="result-prize-right-bet">
            {{ source.secondPrizeLevel.totalPrizeCount }}
            {{ $t("lotteryMoney.xxz") }}
          </div>
        </div>
        <div v-else class="result-prize-dkj">
          {{ $t("lotteryMoney.resultDkj") }}
        </div>
      </div>
      <!-- 三等奖 -->
      <div
        class="result-prize items-center"
        :class="{ 'result-prize-fri': lotteryStore.isFri }"
      >
        <div class="result-prize-left items-center">
          <img
            class="result-prize-left-img"
            src="/image/lottery-v3/result-sdj-icon.svg"
          />
          <div class="result-prize-left-text">
            {{ $t("lotteryMoney.sdj") }}
          </div>
        </div>
        <div
          v-if="lotteryStore.activityCurStatus == 5"
          class="result-prize-right items-center"
        >
          <div
            class="result-prize-right-bdc"
            :class="{ 'result-prize-right-bdc-fri': lotteryStore.isFri }"
          >
            {{ source.thirdPrizeLevel.oneBetPrizeAmount }} BDC/{{
              $t("lotteryMoney.xxz")
            }}
          </div>
          <div class="result-prize-right-bet">
            {{ toThousands(source.thirdPrizeLevel.totalPrizeCount) }}
            {{ $t("lotteryMoney.xxz") }}
          </div>
        </div>
        <div v-else class="result-prize-dkj">
          {{ $t("lotteryMoney.resultDkj") }}
        </div>
      </div>
      <!-- 参与奖 -->
      <div
        class="result-prize items-center"
        :class="{ 'result-prize-fri': lotteryStore.isFri }"
      >
        <div class="result-prize-left items-center">
          <img
            class="result-prize-left-img"
            src="/image/lottery-v3/result-cyj-icon.svg"
          />
          <div class="result-prize-left-text">
            {{ $t("lotteryMoney.cyj") }}
          </div>
        </div>
        <div
          v-if="lotteryStore.activityCurStatus == 5"
          class="result-prize-right items-center"
        >
          <div
            class="result-prize-right-bdc"
            :class="{ 'result-prize-right-bdc-fri': lotteryStore.isFri }"
          >
            {{ source.participationPrizeLevel.oneBetPrizeAmount }} BDC/{{
              $t("lotteryMoney.xxz")
            }}
          </div>
          <div class="result-prize-right-bet">
            {{ toThousands(source.participationPrizeLevel.totalPrizeCount) }}
            {{ $t("lotteryMoney.xxz") }}
          </div>
        </div>
        <div v-else class="result-prize-dkj">
          {{ $t("lotteryMoney.resultDkj") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="winningResult">
import { useEventBus } from "@vueuse/core";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";
import { useGlobalStore } from "~~/store/global";

const props = withDefaults(
  defineProps<{
    source?: any; // 中奖结果
  }>(),
  {
    source: {},
  }
);
const emit = defineEmits(["countdownEnd"]);

const lotteryStore = useLotteryV3Store();
const globalStore = useGlobalStore();

// 定时器-通知
let unsubscribe: any = null; // 定时器通知对象
let unsubscribeFns: any = {}; // 执行的函数数组
const moneyInterval = useEventBus("lottery-v3-interval-emit");

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 未开始倒计时
let hours = ref("--");
let minutes = ref("--");
let seconds = ref("--");
// sendPrizeTime
function updateLotteryCountdown() {
  // 开奖时间(动态的)
  let endTime = Number(lotteryStore.$state.sendPrizeTimeSelect);
  if (!endTime && lotteryStore.$state.sendPrizeTime) {
    endTime = Number(lotteryStore.$state.sendPrizeTime) - 24 * 60 * 60 * 1000;
  }

  // Number(lotteryStore.$state.beginTime) + (24 + 10) * 60 * 60 * 1000;
  // Number(lotteryStore.$state.beginTime) + 7 * 60 * 60 * 1000 - 13*60*1000;
  // console.log("--endTime--", endTime);

  let isRefrrsh = false;
  // 计算函数
  const updateCountdown = (now: any) => {
    const distance = endTime - Number(now);
    // 倒计时结束时的处理
    if (distance < 0 && !isRefrrsh) {
      isRefrrsh = true;
      setTimeout(() => {
        emit("countdownEnd");
      }, 500);
      return;
    }
    // 计算剩余的小时、分钟和秒
    if (distance >= 0) {
      // console.log("-distance--", distance);
      hours.value = `${Math.floor(
        (distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60)
      )}`;
      if (Number(hours.value) < 10) hours.value = `0${hours.value}`;
      minutes.value = `${Math.floor(
        (distance % (1000 * 60 * 60)) / (1000 * 60)
      )}`;
      if (Number(minutes.value) < 10) minutes.value = `0${minutes.value}`;
      seconds.value = `${Math.floor((distance % (1000 * 60)) / 1000)}`;
      if (Number(seconds.value) < 10) seconds.value = `0${seconds.value}`;
    }
  };
  // 先执行一次,不然要等一秒才能计算
  const ckbzTime = new Date("2024/01/01").getTime();
  if (Number(globalStore.$state.serverTime) > ckbzTime)
    updateCountdown(globalStore.$state.serverTime);
  //
  unsubscribeFns["updateLotteryCountdown"] = (val: number) => {
    // console.log("lottery-start-1111-定时器");
    updateCountdown(val);
  };
}

onMounted(() => {
  // 1. 统一的定时器,通知,组件加载的时候只初始化一次
  if (!unsubscribe) {
    unsubscribe = moneyInterval.on((val) => {
      if (unsubscribeFns && Object.keys(unsubscribeFns).length > 0) {
        Object.keys(unsubscribeFns).forEach((key: any) => {
          // console.log("--unsubscribeFns--", key);
          const fn = unsubscribeFns[key];
          if (fn && typeof fn === "function") {
            fn(val);
          }
        });
      }
    });
  }
  // 2. 初始化
  updateLotteryCountdown();
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.winningResult {
  position: relative;
  background-color: #fff;
  margin: 5 * 2px 15 * 2px 10 * 2px 15 * 2px;
  padding: 15 * 2px 10 * 2px 10 * 2px 10 * 2px;
  border-radius: 12 * 2px;
}
.title {
  position: absolute;
  top: 0;
  left: 2%;
  width: 96%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0) 0%,
    rgba(0, 123, 255, 1) 50%,
    rgba(0, 123, 255, 0) 100%
  );
  &-fri {
    background: linear-gradient(
      90deg,
      rgba(255, 155, 1, 0) 0%,
      rgba(255, 155, 1, 1) 50%,
      rgba(255, 155, 1, 0) 100%
    );
  }
  &-content {
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);

    &-left {
      position: relative;
      right: -0.8px;
      height: 22 * 2px;
    }
    &-text {
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
      background-color: #007bff;
      padding: 0 * 2px 8 * 2px;
      height: 22 * 2px;
      line-height: 22 * 2px;
      white-space: nowrap;
      &-fri {
        background: #ff9b01;
      }
    }
    &-right {
      position: relative;
      left: -0.8px;
      transform: rotateY(180deg);
      height: 22 * 2px;
    }
  }
}

.result {
  &-top {
    position: relative;
    margin-top: 5 * 2px;
    &-hdj {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 85 * 2px;
      height: 34 * 2px;
    }

    &-prize {
      justify-content: space-between;
      padding: 10 * 2px 21 * 2px 10 * 2px 0;
      background: linear-gradient(90deg, #007bff 0%, #00b2ff 100%) !important;
      border-top-left-radius: 8 * 2px;
      border-top-right-radius: 8 * 2px;
      border-bottom-right-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
      margin-top: -5 * 2px;

      &-fri {
        background: linear-gradient(90deg, #f76e02 0%, #ff960d 100%) !important;
      }

      &-left {
        position: relative;
        height: 16 * 2px;
        &-img {
          position: relative;
          margin-top: -3 * 2px;
          margin-left: 10 * 2px;
          width: 30 * 2px;
          height: 30 * 2px;
          margin-right: 9 * 2px;
        }
        &-text {
          color: #fff;
          font-size: 12 * 2px;
          font-weight: 400;
        }
      }
      &-right {
        &-bdc {
          text-align: right;
          margin-right: 4 * 2px;
          color: #fff;
          font-size: 12 * 2px;
          font-weight: 590;
          width: 100 * 2px;
        }
        &-bet {
          text-align: right;
          min-width: 60 * 2px;
          color: #fff;
          font-size: 12 * 2px;
          font-weight: 400;
        }
      }
      &-dkj {
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 400;
      }
    }

    &-winner {
      position: relative;
      display: flex;

      &-left {
        position: relative;
        width: 10 * 2px;
        height: 10 * 2px;
      }
      &-right {
        position: relative;
        top: 0;
        transform: rotateY(180deg);
        width: 10 * 2px;
        height: 10 * 2px;
      }
      &-center {
        padding: 10 * 2px 0;
        width: calc(100% - 10 * 4px);
        background: linear-gradient(90deg, #d6f6ff 0%, #cce5ff 100%);
        border-radius: 0px 0px 8 * 2px 8 * 2px;
        border-bottom-left-radius: 8 * 2px;
        border-bottom-right-radius: 8 * 2px;
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;

        &-fri {
          background: linear-gradient(90deg, #ffefd6 0%, #fff3cc 100%);
        }
        &-prize {
          padding: 5 * 2px 10 * 2px;
          justify-content: space-between;
        }

        &-left {
          position: relative;
          height: 16 * 2px;
          &-img {
            position: relative;
            width: 20 * 2px;
            height: 20 * 2px;
            border-radius: 100px;
            overflow: hidden;
            margin-right: 9 * 2px;
          }
          &-text {
            color: #141924;
            font-size: 12 * 2px;
            font-weight: 400;
          }
        }
        &-right {
          &-bdc {
            text-align: right;
            margin-right: 6 * 2px;
            color: #007bff;
            font-size: 12 * 2px;
            font-weight: 590;
            width: 100 * 2px;
            &-fri {
              color: #f97504;
            }
          }
          &-bet {
            text-align: right;
            width: 60 * 2px;
            color: #141924;
            font-size: 12 * 2px;
            font-weight: 400;
          }
        }

        &-wrzj {
          width: 100%;
          justify-content: center;
          flex-direction: column;
          &-img {
            width: 40 * 2px;
            height: 40 * 2px;
          }
          &-title {
            margin: 6 * 2px 0;
            font-size: 13 * 2px;
            font-weight: 590;
            color: #002853;
          }
          &-desc {
            text-align: center;
            padding: 0 10 * 2px;
            font-size: 12 * 2px;
            font-weight: 400;
            color: #999da7;
          }
        }
      }
    }

    &-countdown {
      flex-direction: column;
      justify-content: center;
      &-icon {
        width: 26 * 2px;
        height: 26 * 2px;
      }
      &-center {
        margin: 8 * 2px 0;
        padding: 10 * 2px;
        border-radius: 10 * 2px;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.8);
        &-top {
          justify-content: center;
          &-text {
            font-size: 15 * 2px;
            font-weight: 700;
            color: #fff;
            background-color: #007bff;
            border-radius: 4 * 2px;
            padding: 4 * 2px 4 * 2px;
            margin-left: 4 * 2px;
            &-sun {
              background: #ffae00;
            }
          }
          &-width {
            min-width: 28 * 2px;
            text-align: center;
          }
          &-point {
            font-size: 15 * 2px;
            font-weight: 590;
            color: #002853;
            margin-left: 4 * 2px;
          }
        }
        &-bottom {
          margin-top: 8 * 2px;
          color: #002853;
          font-size: 12 * 2px;
          font-weight: 590;
          text-align: center;
        }
      }
      &-bottom {
        margin: 0 15 * 2px;
        justify-content: center;
        &-icon {
          position: relative;
          margin-top: 3 * 2px;
          width: 9 * 2px;
        }
        &-text {
          text-align: center;
          margin: 0 10 * 2px;
          color: #999da7;
          font-size: 11 * 2px;
          font-weight: 400;
        }
      }
    }
  }
  &-prize {
    margin: 0 10 * 2px;
    justify-content: space-between;
    padding: 10 * 2px 10 * 2px 10 * 2px 0;
    background: linear-gradient(90deg, #e5f2ff 0%, #fff 100%);
    border-radius: 8 * 2px;
    margin-top: 12 * 2px;

    &-fri {
      background: linear-gradient(90deg, #fff5e5 0%, #fff 100%);
    }

    &-left {
      position: relative;
      height: 16 * 2px;
      &-img {
        position: relative;
        margin-top: -3 * 2px;
        width: 30 * 2px;
        height: 30 * 2px;
        margin-right: 9 * 2px;
      }
      &-text {
        color: #141924;
        font-size: 12 * 2px;
        font-weight: 400;
        white-space: nowrap;
      }
    }
    &-right {
      &-bdc {
        text-align: right;
        margin-right: 4 * 2px;
        width: 100 * 2px;
        color: #007bff;
        font-size: 12 * 2px;
        font-weight: 590;
        &-fri {
          color: #ff9b01;
        }
      }
      &-bet {
        text-align: right;
        width: 60 * 2px;
        color: #141924;
        font-size: 12 * 2px;
        font-weight: 400;
        white-space: nowrap;
      }
    }
    &-dkj {
      color: #141924;
      font-size: 12 * 2px;
      font-weight: 400;
    }
  }
}
</style>
